<template>
    <div class="password">
        <el-form :model="user" status-icon :rules="rule" ref="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="旧密码" prop="passOld">
            <el-input v-model="user.passOld"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="passNew">
            <el-input type="password" v-model="user.passNew" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="passCheck">
            <el-input type="password" v-model="user.passCheck" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapState, mapGetters,mapMutations,mapActions } from 'vuex'
export default {
    data(){
        var checkPassOld = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入旧密码'));
            }else if(value.length < 6){
                callback(new Error('请输入6为以上的旧密码'));
            }else{
                callback();
            }
        };
         var checkPassNew = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else {
                if (this.user.passCheck) {
                    this.$refs.form.validateField('passCheck');
                }
                callback();
            }
        };
        var checkPassCheck = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.user.passNew) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
        };
        return{
            user:{
                passOld:'',
                passNew:'',
                passCheck:''
            },
            rule: {
                passOld: 
                [
                    { validator: checkPassOld, trigger: 'blur' }
                ],
                passNew: 
                [
                    { validator: checkPassNew, trigger: 'blur' }
                ],
                passCheck: 
                [
                    { validator: checkPassCheck, trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
      logout(){

      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            alert("信息有误");
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.form.resetFields();
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.password
{
    .el-form
    {
        width:500px;
    }
}
</style>
